<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
	            width:100px;
	            height:100px;
	            background: yellow;
	            margin:10px auto;
	        }
	</style>
	<link rel="stylesheet" type="text/css" href="../css/animate.min.css"/>
	</head>
	<body>
		<div id="box">
			<input type="text" v-model="show">
			<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
				<p v-show="show" class="animated" v-for="(val,index) in lists" :key="index">
					{{val}}
				</p>
			</transition-group>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			window.onload = function() {
				new Vue({
					el: '#box',
					data: {
						show: '',
						list: ['apple', 'banana', 'orange', 'pear']
					},
					computed: {
						lists: function() {
							var arr = [];
							this.list.forEach(function(val) {
								if (val.indexOf(this.show) != -1) {
									arr.push(val);
								}
							}.bind(this));
							return arr;
						}
					}
				});
			};
		</script>

	</body>
</html>
